<template>
  <div class="app-container">
    <h2>我发起的拼单</h2>

    <el-table :data="orderList" class="data_table" style="width: 100%;">
      <el-table-column prop="name" label="拼单发起者" width="100">
        <template slot-scope="{row}">
          <span>{{ row.data.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="拼单商店" width="100">
        <template slot-scope="{row}">
          <span>{{ row.data.store.storeName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="place" label="拼单物品名称" width="150">
        <template slot-scope="{row}">
          <span>{{ row.data.good.goodName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goods" label="拼单物品类型" width="100">
        <template slot-scope="{row}">
          <span>{{ row.data.good.goodType }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="我参与的拼单物品数量" width="80">
        <template slot-scope="{row}">
          <span>{{ row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="拼单价格（个人）" width="80">
        <template slot-scope="{row}">
          <span>{{ row.data.price }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="拼单进度" width="80">
        <template slot-scope="{row}">
          <span>{{ row.data.nowGoodNumber }} / {{ row.data.goodNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="拼单人数" width="80">
        <template slot-scope="{row}">
          <span>{{ row.data.nowNum }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="截至日期" width="250">
        <template slot-scope="{row}">
          <el-date-picker ref="date" type="datetime" v-model="row.data.end_time" readonly />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="拼单状态" width="80">
        <template slot-scope="{row}">
          <span>{{ row.data.fightOrderState }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Actions" align="center" width="200" class-name="seeMore">
        <template slot-scope="{row}">
          <el-button class="filter-item" type="primary" @click="deleteOrder(row)" :disabled="row.fightOrderState != 'ORDER_DISPLAY'" >
            删除拼单
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
  import axios from 'axios'
  import request from '@/utils/request'
  export default {
    name: 'my-launch-pindan',
    data (){
      return{
        userId: 0,
        userName: '',
        orderList: []
      }
    },
    mounted(){
      this.init()
    },
    methods: {
      init(){
        this.userId = JSON.parse(sessionStorage.getItem('user')).userId
        this.userName = JSON.parse(sessionStorage.getItem('user')).userName
        // 初始化数据，用户可以看到的自己发起的清单列表，后面需要写上用户的id
        request.get("/fightorder/getUserOrder/" + this.userId ).then(request => {
          var Data=request.data // PFResponse
          this.orderList = Data.data
        })
      },
      deleteOrder(row) {
        request.delete('/fightorder/deleteFightOrder/' + row.id).then(request => {
          var Data=request.data
          if(Data.code == 200) {
            this.$message.success(Data.message)
            this.init()
          } else {
            this.$message.error(Data.message)
          }
        }).catch((err) => {
          this.$message.error(err)
        })
      }
    }
  }
</script>

<style scoped>

</style>
